<template>
	<view class="tabBar-container">
		<view class="tabBar-container-item" v-for="(item,index) in list" :class="{active:index === selectIndex}" :key="index" @click="handleIndex(item.pagePath, index)">
			<!-- <image :src="item.iconPath" mode=""></image> 这种变量的形式，vue-cli不可以编译成绝对路径-->
			<!-- <image src="@/static/global/home.png" mode=""></image> 这种地址，vue-cli可以编译成绝对路径-->
			<image class="icon" :src="index === selectIndex ? item.selectedIconPath : item.iconPath" mode=""></image>
			<!-- <text>{{item.text}}</text> -->
			<text>{{item.text}}</text>
			<image v-show="index === selectIndex" src="@/static/home/layer.png" mode="" class="light"></image>
		</view>
	</view>
</template>

<script>
	// 解决办法 通过import导入
	import home from "@/static/global/home.png"
	import homeActive from "@/static/global/home-active.png"
	import barrage from "@/static/global/barrage.png"
	import barrageActive  from "@/static/global/barrage-active.png"
	import list from "@/static/global/list.png"
	import listActive from "@/static/global/list-active.png"
	import game from "@/static/global/game.png"
	import gameActive from "@/static/global/game-active.png"
	export default {
		name:"tabBar",
		props:{
			selectIndex:{
				type:Number,
				required:true,
			}
		},
		data() {
			return {
				list: [   // 显示页面信息
					{
					  "pagePath": "pages/home/home",   // 页面路径
					  "iconPath": home,   // 默认图片
					  "selectedIconPath": homeActive,  // 选中图片
					  "text": "首页"   // 文字描述信息
					},
					{
					  "pagePath": "pages/barrage/barrage",   // 页面路径
					  "iconPath": barrage,   // 默认图片
					  "selectedIconPath": barrageActive,  // 选中图片
					  "text": "祝福弹幕"
					},
					{
					  "pagePath": "pages/list/list",   // 页面路径
					  "iconPath": list,   // 默认图片
					  "selectedIconPath": listActive,  // 选中图片
					  "text": "中奖名单"
					},
					{
					  "pagePath": "pages/game/game",   // 页面路径
					  "iconPath": game,   // 默认图片
					  "selectedIconPath": gameActive,  // 选中图片
					  "text": "互动游戏"
					}
			    ]
			}
		},
		methods:{
			handleIndex(url, newIndex){
				// console.log(url)
				uni.redirectTo({
					url:'/' + url
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.tabBar-container{
	position:absolute;
	bottom:0;
	left:0;
	z-index:999;
	@include flex(space-around)
	width:100%;
	color:#fff;
	box-sizing:border-box;
	font-size:24rpx;
	.tabBar-container-item{
		@include myFlex();
		// position:relative;
		&.active{
			color:#FFDF02;
		}
		.icon{
			
			width:40rpx;
			height:40rpx;
			margin:10rpx 0;
		}
		text{
			margin-bottom:8rpx;
		}
		.light{
			position: absolute;
			bottom:0px;
			width:160rpx;
			height:30rpx;
			margin-bottom:8rpx;
		}
	}
}
</style>
